<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS图片实现垂直居中</title>
    <style>
        .dv1 {
            text-align: center; 
            width: 500px;
            height:200px; 
            line-height:200px;   
            /* 行高设置： 参考： https://www.cnblogs.com/dolphinX/p/3236686.html */
            border: green solid 1px;
        }
        .dv1 img {
            display: inline-block; 
            vertical-align: middle;  
            /* vertical-align 属性设置元素的垂直对齐方式。
            该属性定义 行内元素 的基线相对于该元素所在行的基线的垂直对齐。  
            允许指定负长度值和百分比值。这会使元素降低而不是升高。
            在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 */

        }

        .dv3 {
            width: 500px;
            height:200px; 
            position: relative; 
            border: green solid 1px;
        }
        .dv3 img {
            width: 164px; 
            height: 164px;
            position: absolute; 
            left:50%; 
            top: 50%; 
            margin-left: -82px;
            margin-top: -82px;
        }
        
    </style>
</head>
<body>
    <!-- 1. 利用高==行高：  这种方法需要注明高度才可以使用 -->
    <div class="dv1">
        <img src="http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png" alt="">
    </div>

    <!-- 2、利用table实现图片垂直居中： 尝试设置了， 没有垂直居中！！！ -->
    <div style="text-align: center; width: 500px; height:200px; display: table; border: green solid 1px;">   
        <span style="display: table-cell; vertical-align: middle; ">
            <img alt="" src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" style="display: inline-block;" />
        </span>
        <!-- 这里使用display: table;和display: table-cell;来模拟table，
        这种方法并不兼容IE6/IE7，IE67不支持display: table，如果你不需要支持IE67那就可以用
        这种方法有一个缺点：当你设置了display: table;可能会改变你的原有布局 -->
    </div>
    
    <!-- 3. 利用绝对定位实现图片垂直居中： 如果已知图片的宽度和高度可以用这种方法 -->
    <div class="dv3">
        <img  src="http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png" />
    </div>
    


</body>
</html>